<template>
  <div class="blank">
    <ComHeader title="评价列表" leftArrow='true' />
    <div class="comments">
      <div class="goods">
        产品：{{machine.machine_name}}
      </div>
      <ul>
        <li v-for="(i, index) in commentContent" :key="index">
          <div class="comment-head">
            <div class="comment-name">
              {{i.user_nickname}}
            </div>
            <div class="comment-date">
              {{i.commentDate}}
            </div>
          </div>
          <div class="rate">
            <rate :length="i.star_level" :value="i.star_level" :disabled="true" />
          </div>
          <div class="comment-content">
            {{i.content}}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ComHeader from '@/common/ComHeader'
import { Button } from 'mint-ui';
import api from "@/fetch/api"
  export default {
    name: 'goodsComment',
    data() {
      return {
        data: null,
        commentContent: null,
        machine: this.getlocalStorage('orderMachineDetail')
      };
    },
    components: {
        ComHeader,
        Button
    },
    created() {
      const params = {
        machine_code: this.machine.machine_code,
        username: this.getUserId()
      };
      api.machineCommentList(params)
        .catch(res => {
          console.log('data')
          this.print(res);
          this.commentContent = res.data;
        })
    },
    methods: {

    }
  };
</script>

<style lang="stylus" scoped>
.comments{
  padding-top: 1.45rem;
  li{
    overflow: hidden;
    padding: .6rem .4rem;
    border-bottom: 1px solid #ddd;
    background: #fff;
    .comment-head{
      overflow: hidden;
      line-height: .6rem;
      .comment-name{
        float: left;
        font-size: .46rem;
      }
      .comment-date{
        float: right;
        color: #777;
      }
    }
    .comment-content{
      font-size: .46rem;
      margin-top: .3rem;
    }
    .rate{
      margin-left: -.3rem;
    }
  }
  .goods{
    padding: .4rem .6rem;
    background: #fff;
  }
}
</style>
